import React, { Component } from 'react'
// 7. 导入 store 
import store from './store/index'

import axios from 'axios'

import { CHANGE_BANNER_LIST, CHANGE_PRO_LIST } from './store/types'


import { connect } from 'react-redux'

class Page2 extends Component {

    componentDidMount() {
        this.props.getBannerList()
        this.props.getProList()
    }

    render() {

        const banner = this.props.bannerList.map(item => {
            return <img style={{ width: 100 }} src={item.img} key={item.bannerid} />
        })

        return (
            <div>
                <h1>Page2 ----- {this.props.count} </h1>

                {banner}


                <ol>
                    {this.props.proList.map(item => {
                        return <li key={item.proid}>
                            {item.proname}
                        </li>
                    })}
                </ol>

            </div>
        )
    }
}


export default connect((state) => {
    // return 出的内容会被映射到组件的 props 中
    return {
        count: state.app.count,
        bannerList: state.pro.bannerList,
        proList: state.pro.proList
    }
}, (dispatch) => {
    // return 出的内容会被映射到组件的 props 中
    return {
        getBannerList() {
            axios.get('/banner/list').then(res => {
                dispatch({
                    type: CHANGE_BANNER_LIST,
                    payload: res.data.data
                })
            })
        },
        getProList() {
            fetch('/pro/list').then(res => res.json()).then(res => {
                // console.log(res.data);
                dispatch({
                    type: CHANGE_PRO_LIST,
                    payload: res.data
                })
            })
        }
    }
})(Page2)